<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title></title>
<style type="text/css"></style>
<link rel="stylesheet" href="css/layui-v1.0.9_rls/layui/css/layui.css"
	type="text/css"></link>
<link rel="stylesheet" href="css/hear.css" type="text/css"></link>
<link rel="stylesheet" href="css/result.css" type="text/css"></link>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="PlugIns/build/layer.js"></script>
<script type="text/javascript" src="css/layui-v1.0.9_rls/layui/layui.js"></script>
<!-- <script type="text/javascript" src="css/layui-v1.0.9_rls/layui/lay/dest/layui.all.js"></script> -->

</head>
<body>
	<!-- 头部 -->
	<div class="hear">
		<div class="Size1200">
			<div style="width: 150px;float: left;">
				<img src="img/logo/u=2245018026,3658504571&fm=26&gp=0.png" onclick="location.href='jsp/index.jsp'"
					width="150px" height="30px"></img>
			</div>
			<div class="content_right float_right">
				<ul class="ul">
					<li class="width40"><a>&nbsp;</a>
					</li>
					<li><a>招商</a></li>
					<li><a>帮助</a></li>
					<li><a>联系</a></li>
					<c:if test="${not empty UserInfos}">
						<li><a href="jsp/user/userIndex.jsp">${UserInfos.nickname}</a>
						</li>
						<li>欢迎您</li>
					</c:if>
					<c:if test="${empty UserInfos }">
						<li><a class="login">登录</a></li>
						<li><a id="register">注册</a>
						</li>
					</c:if>
				</ul>
			</div>
			<div class="clear_float "></div>
		</div>
	</div>

	<!-- 弹出框 登录  -->
	<div class="loginNone"
		style="display: none; width: 550px; height: 350px">
		<div class="login-centent">
			<form action="userInfo/login" method="get">
				<div class="login-centent-title"></div>
				
				<div>
					<input type="text" name="phone" value="" placeholder="请输入用户名">
				</div>
				
				<div>
					<input type="password" name="password" value=""
						placeholder="请输入用户密码">
				</div>
				<div class="height30"></div>
				<div style="width:90px; height: 30px; margin: 0 auto">
					<input type="submit" value="登录"><input type="reset"
						value="重置" />
				</div>
			</form>
		</div>
	</div>
	
	<!-- 弹出框  注册 -->
	<div class="register" style="display: none">

		<div>
			<div class="login-centent">
				<div class="height30"></div>
				<form class="layui-form" action="wwww.baidu.com">

					<div class="layui-form-item">
						<label class="layui-form-label">请输入手机号</label>
						<div class="layui-input-inline">
							<input type="number" name="registerPhone" lay-verify="phone"
								autocomplete="off" placeholder="请输入手机号" class="layui-input">
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">输入验证码</label>
						<div class="layui-input-inline">
							<input type="text" name="username" lay-verify="required"
								placeholder="输入验证码" autocomplete="off" class="layui-input">
						</div>
						<button class="send-phoneCode code1" type="button">发送验证码</button>
						<button class="register-btn-sended code2" disabled="disabled">
							<span>60</span>S后重新发送
						</button>
					</div>

					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">验证手机</label>
							<div class="layui-input-inline">
								<input type="tel" name="phone" lay-verify="phone"
									autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">验证邮箱</label>
							<div class="layui-input-inline">
								<input type="text" name="email" lay-verify="email"
									autocomplete="off" class="layui-input">
							</div>
						</div>
					</div>
					
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				
				</form>

				<!-- <form action="userInfo/register" method="get">
					<div>
						<input type="number" placeholder="手机验证" name="registerPhone">
					</div>
					<div>
						<input type="text" placeholder="验证码" name="codeAthour"><input
							type="button" name="btncode" value="获取验证码">
					</div>
					<div>
						<input type="password" placeholder="设置密码" name="password1">
					</div>
					<div style="display: none; color:red;" id="show">两次输入秘密不一样</div>
					<div>
						<input type="password" placeholder="请再次输入密码" name="passwords">
					</div>

					<div>
						<input type="email" placeholder="请输入邮箱" name="mialbox">
					</div>
					<div>
						<input type="submit" value="注册"> <input type="reset"
							value="重置">
					</div>
				</form> -->

			</div>
		</div>
	</div>
</body>

<script type="text/javascript">
	$(function() {
		/* var obj = $("input[name=password1]").val().trim();//获取密码
		var obj1 = $("input[name=passwords]").val().trim();//再次填写密码 */

		/* 获取焦点 */
		$("input[name=passwords]").focus(function() {
			$('#show').css("display", "none");

		});
		/* 获取焦点 */
		$("input[name=passwords]").focusout(function() {
			if (obj.length != obj1.length) {
				$('#show').css("display", "block");
			}
		});
		
		// 登陆
		$('.login').on('click', function() {
			layer.open({
				type : 1,
				title : "登录",
				fix : false,
				maxmin : true,
				shadeClose : true,
				area : [ '600px', '400px' ],
				content : $('.loginNone')
			});
		});
		
		// 注册
		$('#register').on('click', function() {
			layer.open({
				type : 1,
				title : "注册",
				fix : false,
				maxmin : true,
				shadeClose : true,
				area : [ '600px', '400px' ],
				content : $('.register')
			});
		});
		
		$('.code1').click(function() {
			var sMobile = $("input[name='registerPhone']").val();
			console.log(sMobile);
			//			$(this).css('border','1px solid #cccccc');
			//			$(this).css('backgroundColor',' #cccccc');
			//			$(this).attr('value','60S后重新发送');
			if ((/^1[3|4|5|8][0-9]\d{4,8}$/.test(sMobile))) {
				
				$('.code1').css('display', 'none');
				$('.code2').css('display', 'block');

				var time = 60;
				var t = setInterval(function() {
					time--;
					$('.code2').html(time + "S后重新发送");
					if (time == 0) {
						clearInterval(t);
						$('.code2').css('display', 'none');
						$('.code1').css('display', 'block');
					}
				}, 1000);
				
			}else{
				alert("您输入的手机号码格式不正确");
			}
		});
	});
</script>

<script type="text/javascript">
	layui
			.use(
					[ 'form', 'layedit', 'laydate' ],
					function() {
						var form = layui.form(), layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate;

						//创建一个编辑器
						var editIndex = layedit.build('LAY_demo_editor');

						//自定义验证规则
						form.verify({
							title : function(value) {
								if (value.length < 5) {
									return '标题至少得5个字符啊';
								}
							},
							pass : [ /(.+){6,12}$/, '密码必须6到12位' ],
							content : function(value) {
								layedit.sync(editIndex);
							}
						});

						//监听指定开关
						form.on('switch(switchTest)', function(data) {
							layer.msg('开关checked：'
									+ (this.checked ? 'true' : 'false'), {
								offset : '6px'
							});
							layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF',
									data.othis)
						});

						//监听提交
						form.on('submit(demo1)', function(data) {
							layer.alert(JSON.stringify(data.field), {
								title : '最终的提交信息'
							})
							return false;
						});

					});
</script>
</html>
